<template>
	<view>
		<view style="position: relative;" >
			<u-swiper :list="list2"height='750' mode="number" indicator-pos="topRight"></u-swiper>
			<view
				style="position: absolute; bottom:-70px;right:50% ;margin-right:-46% ; width:92%;height: 104px;background: #FFFFFF;border-radius: 16px 16px 8px 8px;padding: 15px;">
				<view>带跑腿，全程使命必达</view>
				<text
					style="background: #EDFFEB;border-radius: 2px;border: 1px solid #C9E8C6;padding: 1px 6px;font-size: 10px;color: #427705;margin-top:10px;display: inline-block;">同城跑腿配送</text>
				<view style="color: #666666;margin-top:10px"><text style="font-size: 10px;color:#F55959">¥</text><text
						style="font-size: 15px;color:#F55959;font-weight: bold">20.00</text>/次</view>
			</view>
		</view>
		<view style="padding: 0 15px;padding-bottom: 10px; margin-top: 84px;">
			<view style="height: 154px;background: #FFFFFF;border-radius: 8px;padding: 15px;">
				<view style="font-size: 15px;" class="flex_">
					<text style="color: #666666;">技能分类</text>
					<text style="color: #333333;">同城跑腿配送</text>
				</view>
				<view style="font-size: 15px;margin-top:15px" class="flex_">
					<text style="color: #666666;">营业时间</text>
					<text style="color: #333333;">全天营业</text>
				</view>
				<view style="font-size: 15px;margin-top:15px" class="flex_">
					<text style="color: #666666;">联系电话</text>
					<text style="color: #333333;">18635468824</text>
				</view>
				<view style="font-size: 15px;margin-top:15px" class="flex_">
					<text style="color: #666666;">商家位置</text>
					<text style="color: #333333;">北京市大兴区葫芦村26号</text>
				</view>
			</view>
			<view style="padding: 15px;background: #FFFFFF;border-radius: 8px;margin-top: 10px;">
				<view style="width: 345px;" class="flex align-center">
					<span
						style="display:inline-block; width: 3px;height: 15px;background: #66BB05;border-radius: 2px;"></span>
					<span style="margin-left:10px">推荐服务</span>
				</view>
				<view>
					<view
						style="padding-top:15px;display: flex;background: #FFFFFF;border-radius: 8px;align-items: center">
						<image style="display:inline-block ;width:90px;height: 90px;"
							src="../../static/image/weChat-pyq.png">
						</image>
						<view style="width:220px; margin-left:11px;">
							<view style="font-size: 16px;line-height: 22px;">代跑腿，全城使命必达</view>
							<view style="margin-top:10px;" class="flexClsNowrapSpcBtw">
								<text
									style="background: #EDFFEB;border-radius: 2px;border: 1px solid #C9E8C6;padding: 1px 6px;font-size: 10px;color: #427705;display: inline-block;">同城跑腿配送</text>
								<view style="color: #666666;font-size: 10px;">已服务123人</view>
							</view>
							<view style="color: #666666;font-size: 10px;margin-top: 8px;">距您1.2km</view>
							<view style="margin-top:10px;line-height: 20px;" class="flex flexClsNowrapSpcBtw">
								<view style="color: #666666;"><text style="font-size: 10px;color:#F55959">¥</text><text
										style="font-size: 15px;color:#F55959;font-weight: bold">20.00</text>/次</view>
								<view
									style="text-align: center; color: #427705;width: 76px;line-height:  22px; height: 23px;background: #FFFFFF;border-radius: 4px;border: 1px solid #427705;">
									查看明细
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view style="padding: 15px;background: #FFFFFF;border-radius: 8px;margin-top: 10px;">
				<view style="width: 345px;" class="flex align-center">
					<span
						style="display:inline-block; width: 3px;height: 15px;background: #66BB05;border-radius: 2px;"></span>
					<span style="margin-left:10px">服务介绍</span>
				</view>
				<view style="margin-top:10px;color: #333333;">跑腿帮取快递，帮买东西</view>
			</view>
			<view style="padding: 15px;background: #FFFFFF;border-radius: 8px;margin-top: 10px;">
				<view style="width: 345px;" class="flex align-center">
					<span
						style="display:inline-block; width: 3px;height: 15px;background: #66BB05;border-radius: 2px;"></span>
					<span style="margin-left:10px">评价</span>
				</view>
				<view>
					<view class="flex border-bottom " style="padding-bottom: 15px;">
						<view style="margin-top:15px">
							<image style="width:40px;height:40px" class="d-block rounded-50"
								src="../../static/image/guoguo.jpg"></image>
						</view>
						<view style="margin-left:8px">
							<view style="font-size: 14px;color: #333333;">
								九龙家园 9–3-101 张浩（业主）
							</view>
							<view style="font-size: 11px;color: #999999;margin-top:2px">34分钟前</view>
							<view style="font-size: 14px;color: #333333;margin-top:10px">服务很周到！！</view>
						</view>
					</view>
				</view>
			</view>


		</view>
		<view style="background: #F4F4F4;padding: 9px 11px;">
			<view @click="ImmediateOrder()"  style="width: 351px;
height: 42px;
background: linear-gradient(180deg, #76D904 0%, #417505 100%);
border-radius: 22px;font-size: 16px;color: #FFFFFF;line-height: 42px;text-align: center;">
				立即下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [{
					image: '../../static/image/banner05.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				uCurrent: 0,
				indicator: false
			}
		},
		methods: {
			SwiperTab(e) {
				console.log(e, 111111)
				// this.uCurrent =Number(e.target.current)
				// console.log(this.uCurrent);
			},
			ImmediateOrder(){
				uni.navigateTo({
					url: './ImmediateOrder'
				});
			}
		}
	}
</script>

<style>
	page {
		background: #F4F4F4;
	}
	
	.wrap {
		padding: 40rpx;
	}

	.number {
		width: 40px;
		padding: 10rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.8);
		position: absolute;
		right: 10%;
		bottom: 14%;
		text-align: center;
		letter-spacing: 3rpx;

	}
</style>
